import React, { useRef, useEffect } from 'react'
import ReactECharts from 'echarts-for-react'
import { Col, Row } from 'antd'

type EchartDataType = {
    option1?: {
        xAxis?: any[]
        series?: any[]
    }
    option2?: {
        xAxis?: any[]
        seriesBar?: any[]
        seriesLine?: any[]
    }
}

export default function Echarts({
    EchartData,
}: {
    EchartData: EchartDataType
}) {
    const chartRef = useRef<any>(null)
    const chartRef2 = useRef<any>(null)
    const option = {
        title: {
            data: ['销量'],
            top: 30,
        },
        xAxis: {
            data: EchartData?.option1?.xAxis || [],
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: EchartData?.option1?.series || [],
                color: '#57534e',
            },
        ],
        // 高亮样式。
        emphasis: {
            itemStyle: {
                // 高亮时点的颜色。
                text: '收入统计 (单位: 万) demo',
                left: 'center',
                textStyle: {
                    color: '#000000',
                    fontSize: 16,
                    fontWeight: 'normal',
                },
            },
            tooltip: {},
            legend: {
                color: '#726b62ff',
            },
            label: {
                show: true,
                // 高亮时标签的文字。
            },
        },
    }
    const option2 = {
        title: {
            text: '收入统计 (单位: 万) demo',
            left: 'center',
            textStyle: {
                color: '#000000',
                fontSize: 16,
                fontWeight: 'normal',
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
        },
        legend: {
            data: ['销量'],
            top: 30,
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true,
                },
                data: EchartData?.option2?.xAxis || [],
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '降水量',
                min: 0,
                max: 250,
                position: 'right',
                axisLabel: {
                    formatter: '{value} ml',
                },
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                position: 'left',
                axisLabel: {
                    formatter: '{value} °C',
                },
            },
        ],
        series: [
            {
                name: '降水量',
                type: 'bar',
                yAxisIndex: 0,
                data: EchartData?.option2?.seriesBar || [],
            },
            {
                name: '温度',
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                data: EchartData?.option2?.seriesLine || [],
            },
        ],
    }
    useEffect(() => {
        const handleResize = () => {
            chartRef.current?.getEchartsInstance().resize()
            chartRef2.current?.getEchartsInstance().resize()
        }
        window.addEventListener('resize', handleResize)
        return () => {
            window.removeEventListener('resize', handleResize)
            // 销毁实例
            if (chartRef.current) {
                chartRef.current.getEchartsInstance().dispose()
            }
            if (chartRef2.current) {
                chartRef2.current.getEchartsInstance().dispose()
            }
        }
    }, [])
    return (
        <div>
            <Row gutter={[16, 16]}>
                <Col xs={24} md={12}>
                    <ReactECharts
                        ref={chartRef}
                        option={option}
                        style={{ height: 400, width: '100%' }}
                        // theme="dark"
                    />
                </Col>
                <Col xs={24} md={12}>
                    <ReactECharts
                        ref={chartRef2}
                        option={option2}
                        style={{ height: 400, width: '100%' }}
                        // theme="dark"
                    />
                </Col>
            </Row>
        </div>
    )
}
